<template>
	<div class="app-container">
		<el-row>
			<el-button type="primary" icon="plus" @click="addRole">创建角色</el-button>
		</el-row>
		<el-row>
			<el-table :data="roleLise">
				<el-table-column label="角色名" align="center" prop="name"></el-table-column>
				<el-table-column label="角色类型" align="center" prop="type">
					<template slot-scope="scope">	
						<span v-show="scope.row.type == 1">超级管理员</span>
						<span v-show="scope.row.type == 2">企业管理员</span>
						<span v-show="scope.row.type == 3">部门管理员</span>
					</template>
				</el-table-column>
				<el-table-column label="描述" align="center" prop="description"></el-table-column>
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" icon="edit" @click="editRole(scope.row)">编辑</el-button>
						<el-button type="primary" size="mini" icon="edit-outline" @click="editAuthor(scope.row)">设置权限</el-button>
						<el-button size="mini" type="danger" icon="delete" @click="deleteRole(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-row>
		<el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
			<el-form :model="roleForm" label-width="80px" :rules="rules" ref="dataForm" style='margin-left:50px;width:400px;'>
				<el-form-item label="角色名" prop="name">
					<el-input v-model="roleForm.name"></el-input>
				</el-form-item>
				<el-form-item label="角色类型" prop="type">
					<el-select v-model="roleForm.type" placeholder="请选择" style="width:100%;">
						<el-option
						v-for="item in roleTypeList"
						:key="item.value"
						:label="item.label"
						:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="描述" prop="description">
					<el-input v-model="roleForm.description"  type="textarea" :rows="2"></el-input>
				</el-form-item>
				

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="createData" v-if="dialogStatus === 'create'">确 定</el-button>
				<el-button type="primary" @click="updateData" v-else>确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog title="设置权限" :visible.sync="authoVisible">
			<el-row>
				<explain :data="explain"></explain>
			</el-row>
			<el-tree ref="tree" :data="menuList" show-checkbox node-key="id"  :expand-on-click-node="false" :props="defaultProps">
			</el-tree>
			<div slot="footer" class="dialog-footer">
				<el-button @click="authoVisible = false">取 消</el-button>
				<el-button type="primary" @click="changeAuthor">保存</el-button>
			</div>
		</el-dialog>
	</div>

</template>

<script>
	import { getRoleList, saveRole, deleteRole, getlistByRole, saveRoleMenu, getList} from '@/api/admin'
	import explain from '@/components/Explain'
	export default {
		name: "role",
		components: {
			explain
		},
		data() {
			return {
				explain: [
					
					"1.点击角色名称前的“+”号，即可查看其子集权限；",
					"2.当前用户权限为复选框选择部分，请在需要分配给此角色的导航菜单及权限节点上勾选；",
					"3.选中之后点击保存即可修改角色权限"
				],
				menuList:[],
				roleLise: [],
				menuIdList:[],//用户权限所有ID用于默认选择权限树
				roleMenu:{
					"id":"",
					"menuIdList":[]
				},//修改角色权限参数
				dialogStatus:"",
				textMap: {
					update: '修改角色',
					create: '添加角色'
				},
				defaultProps: {
					label: "title",
					children: "children",
				},
				dialogFormVisible:false,
				authoVisible:false,//设置权限弹窗
				roleForm: {
					name: "",
					type:"",
					description:"",
					id:""
				},
				roleTypeList:[
					{label:"超级管理员",value:1},
					{label:"企业管理员",value:2},
					{label:"部门管理员",value:3} 	
				],//角色类型数组
				rules:{
					name: [{
						required: true,
						message: '请输入角色名',
						trigger: 'blur'
					}],
					type: [{
						required: true,
						message: '请选择角色类型',
						trigger: 'change'
					}],
				},
				formLabelWidth:"120px"
				

			}
		},
		created() {
			this.getRoleList();
			this.getMenuList();
		},
		methods: {
			getMenuList(){
				let that = this;
				getList().then((res) => {
					that.menuList = [...res.entity];
				});
			},
			
			getRoleList() {
				let that = this;
				getRoleList().then((res) => {
					that.roleLise = res.entity.data;
				});
			},
			deleteRole(row){
				let that = this;
				this.$confirm('是否确定删除角色？ 删除之后将无法恢复！','提示', {
		          confirmButtonText: '确定删除',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
		         	deleteRole(row.id).then((res)=>{
		         		that.getRoleList();
		         		that.$notify({
							title: '成功',
							message: '删除成功',
							type: 'success',
							duration: 2000
						});
						
		         	})
		        }).catch(() => {
             
        			});
			},
			resetTemp() { //清除表单数据
				this.roleForm = {
					name: "",
					description: "",
					type:""
				};
				delete this.roleForm["id"]; 
			},
			addRole() {
				this.dialogFormVisible = true;
				this.dialogStatus = "create";
				this.resetTemp();
			},
			editRole(row){
				this.dialogStatus = 'update';
				let {name,id,description,type} = row;
				this.roleForm = {
					name,id,description,type
				};
				this.dialogFormVisible = true;
			},
			addAndChange(text){
				let that = this;
				this.$refs['dataForm'].validate((valid) => {	
					saveRole(this.roleForm).then((res) =>{
						that.getRoleList();
						that.dialogFormVisible = false
						that.$notify({
							title: '成功',
							message: text+'成功',
							type: 'success',
							duration: 2000
						});
						that.resetTemp();
					})	
				});
			},
			updateData(){
				this.addAndChange("修改");
				
			},
			createData(){
				this.addAndChange("添加");
			},
			editAuthor(row){//修改角色权限
				this.roleMenu["id"] =  row.id;
				this.authoVisible = true;
				this.roleMenu.menuIdList = [];
				this.bindSelectedTree();
				this.getlistByRole();
			},
			getlistByRole(){
				let that = this;
				getlistByRole(this.roleMenu["id"]).then((res)=>{
					let data = res.entity;
					data.forEach(function(item){
						that.roleMenu.menuIdList.push(item.id);
					});
					this.bindSelectedTree();
				});
			},
			changeAuthor(){
				//获取当前选中选项
				let checkdArry = this.$refs.tree.getCheckedNodes(false,true);
				let that = this;
				this.roleMenu["menuIdList"] = [];
				checkdArry.forEach(function(item,index){
					that.roleMenu["menuIdList"].push(item.id);	
				});
				console.log(checkdArry)
				saveRoleMenu(this.roleMenu).then((res)=>{
					that.$notify({
						title: '成功',
						message: '修改角色权限成功',
						type: 'success',
						duration: 2000
					});
					this.authoVisible = false;
				})
			},
			bindSelectedTree(){//tree树设置默认选中函数
				var that = this;
				if (that.$refs.tree) {//是否渲染tree树
					that.$refs.tree.setCheckedKeys([],false);
                	that.roleMenu.menuIdList.forEach((item)=>{
                		 that.$refs.tree.setChecked(item,true,false)
					});
                } else { 
                    setTimeout(function() {
                        that.bindSelectedTree()
                    },500);
                }
            },
           
            
		}
	}
</script>

<style>
	.el-tree{
		height: 366px;
		overflow-y: auto;
	}
</style>